<template>
  <div class="department-container">
    <el-tree
      :data="data"
      :props="defaultProps"
      default-expand-all
      :expand-on-click-node="false"
    >
      <div slot-scope="obj" class="item">
        <div class="left">{{ obj.data.name }}</div>
        <div class="right">
          <span class="ir-name">{{ obj.data.managerName }}</span>
          <el-dropdown @command="handleCommand($event, obj.data.id)">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
              <el-dropdown-item command="del">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-tree>
    <!-- <addDept ref="aaaa" /> -->
    <addDept
      ref="dept"
      :visible.sync="dialogVisible"
      :list="list"
      :current-id="currentId"
      @okk="getDepartment"
    />
  </div>
</template>
<script>
import {
  getDepartmentRequest,
  deleteDepartmentRequest
} from '@/api/department'
import { transformListTotree } from '@/utils'
import addDept from '@/views/department/component/add-dept.vue'
export default {
  name: 'DepartmentCom',
  components: {
    addDept
  },
  data() {
    return {
      data: [],
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogVisible: false,
      currentId: 0
    }
  },
  computed: {},
  created() {
    this.getDepartment()
  },
  methods: {
    async getDepartment() {
      const res = await getDepartmentRequest()
      this.list = res.data
      this.data = transformListTotree(res.data, 0)
      console.log(this.data)
    },
    async handleCommand(command, id) {
      this.currentId = id
      if (command === 'add') {
        console.log('添加')
        // this.$refs.aaaa.openDialog()
        this.dialogVisible = true
      } else if (command === 'edit') {
        this.dialogVisible = true
        // 子组件js部分无法监听到父组件的值的更新,直接调用会导致始终为null
        // 要么在子组件使用watch/computed监听父组件的值,要么在父组件使用$nextTick方法等子组件加载完毕后再进行调用
        await this.$nextTick(() => {
          this.$refs.dept.getDepartmentById()
        })
        console.log('编辑')
      } else if (command === 'del') {
        console.log('删除')
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            const res = await deleteDepartmentRequest(id)
            this.$message({
              type: 'success',
              message: res.message
            })
            this.getDepartment()
          })
          .catch(() => {})
      }
    }
  }
}
</script>
<style lang='scss'  scoped>
.department-container {
  padding: 30px 140px;
}
.item {
  width: 100%;
  display: flex;
  .left {
    flex: 4;
    padding: 10px 0;
  }
  .right {
    flex: 1;
    padding: 10px 0;
    .ir-name {
      display: inline-block;
      text-align-last: justify;
      width: 65px;
      padding-right: 15px;
    }
  }
}
</style>
